<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>京东商城</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/mvc/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/mvc/css/common/nav.css">
</head>
<body>



<style>

    body{background-color:#fcf8e3;}


</style>

<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">京东</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="/mvc/user/login">登录</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="/mvc/ztx.jsp">个人中心</a></li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                我的京东<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">待处理订单</a></li>
                                <li><a href="#">消息</a></li>
                                <li><a href="#">返修退换货</a></li>
                                <li><a href="#">我的回答</a></li>
                                <li><a href="#">降价商品</a></li>
                                <li><a href="#">我的关注</a></li>
                                <li class="divider"></li>
                                <li><a href="#">我的京东</a></li>
                                <li class="divider"></li>
                                <li><a href="#">我的白条</a></li>
                            </ul>
                        </li>
                        <li><a href="#">京东会员</a></li>
                        <li><a href="#">企业采购</a></li>
                        <li><a href="/mvc/yqc.jsp">京东客服</a></li>
                        <li><a href="#">网站导航</a></li>
                        <li><a href="#">手机京东</a></li>


                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<script>
    $(function() {
        $(".dropdown-toggle").dropdown('toggle');
    });
</script>

<%--左边导航栏--%>
<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <h>个人中心</h>
            <div class="img-circle">  <img src="/mvc/imgs/toux.gif"></div>
            <a href="http://localhost:8088/mvc/user/login">登录/注册</a>
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">家用电器</a></li>
                <li><a href="#">手机/运营商/数码</a></li>
                <li><a href="#">电脑/办公</a></li>
                <li><a href="#">家具/家装/厨具</a></li>
                <li><a href="#">男装/女装/童装/内衣</a></li>
                <li><a href="#">美妆/个护清洁/宠物</a></li>
                <li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
                <li><a href="#">男鞋/运动/户外</a></li>
                <li><a href="#">食品/酒类/生鲜/特产</a></li>
                <li><a href="#">艺术/礼品鲜花</a></li>
                <li><a href="#">图书/文娱/教育</a></li>
                <li><a href="#">机票/酒店/旅游</a></li>
                <li><a href="#">安装/清理/维修/二手</a></li>
                <li><a href="#">其他</a></li>
            </ul>
            <hr class="hidden-sm hidden-md hidden-lg">
        </div>

        <%--中间--%>
        <div class="col-sm-7">
            <%--搜索框--%>
            <div style="padding: 100px 25px 20px;">
                <form class="bs-example bs-example-form" role="form">
                    <div class="row">

                        <div class="col-lg-9">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="请输入您想搜索的商品">
                                <span class="input-group-btn">
						<button class="btn btn-default" type="button">
							搜索
						</button>
					</span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </form>
            </div>
            <%--轮播--%>
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0"
                        class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="/mvc/imgs/guanggao7.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="/mvc/imgs/guanggao3.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="/mvc/imgs/guanggao4.jpg" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                <!-- 控制按钮 -->

            </div>
            <script>
                $(function(){
                    // 初始化轮播
                    $(".start-slide").click(function(){
                        $("#myCarousel").carousel('cycle');
                    });
                    // 停止轮播
                    $(".pause-slide").click(function(){
                        $("#myCarousel").carousel('pause');
                    });
                    // 循环轮播到上一个项目
                    $(".prev-slide").click(function(){
                        $("#myCarousel").carousel('prev');
                    });
                    // 循环轮播到下一个项目
                    $(".next-slide").click(function(){
                        $("#myCarousel").carousel('next');
                    });
                    // 循环轮播到某个特定的帧
                    $(".slide-one").click(function(){
                        $("#myCarousel").carousel(0);
                    });
                    $(".slide-two").click(function(){
                        $("#myCarousel").carousel(1);
                    });
                    $(".slide-three").click(function(){
                        $("#myCarousel").carousel(2);
                    });
                });
            </script>

        </div>
        <div class="col-sm-3">
            <h>  <br/> </h>
            <h>  <br/> </h>
            <h>  <br/> </h>
            <h>  <br/> </h>
            <h>  <br/> </h>
            <h>  <br/> </h>
            <h>  <br/> </h>
            <h>  <br/> </h>
            <%-- <div class="img-circle">  <img src="/mvc/myimag/toux1.gif"></div>--%>

        </div>
        <%--小图标第yi列--%>
        <div class="col-sm-1">
            <br>

            <a href="#"><img src="/mvc/imgs/01.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/011.png'"
                             onMouseOut="this.src='/mvc/imgs/01.png'" /></a>
            <li><a href="#">机票</a></li>


            <a href="#"><img src="/mvc/imgs/02.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/021.png'"
                             onMouseOut="this.src='/mvc/imgs/02.png'" /></a>
            <li><a href="#">企业</a></li>

            <a href="#"><img src="/mvc/imgs/03.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/031.png'"
                             onMouseOut="this.src='/mvc/imgs/03.png'" /></a>
            <li><a href="#">话费</a></li>
            <a href="#"><img src="/mvc/imgs/04.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/041.png'"
                             onMouseOut="this.src='/mvc/imgs/04.png'" /></a>
            <li><a href="#">车票</a></li>
        </div>


        <%--小图标第二列--%>
        <div class="col-sm-1">
            <br>

            <a href="#"><img src="/mvc/imgs/05.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/051.png'"
                             onMouseOut="this.src='/mvc/imgs/05.png'" /></a>
            <li><a href="#">众筹</a></li>


            <a href="#"><img src="/mvc/imgs/06.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/061.png'"
                             onMouseOut="this.src='/mvc/imgs/06.png'" /></a>
            <li><a href="#">理财</a></li>

            <a href="#"><img src="/mvc/imgs/07.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/071.png'"
                             onMouseOut="this.src='/mvc/imgs/07.png'" /></a>
            <li><a href="#">白条</a></li>
            <a href="#"><img src="/mvc/imgs/08.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/081.png'"
                             onMouseOut="this.src='/mvc/imgs/08.png'" /></a>
            <li><a href="#">酒店</a></li>
        </div>
        <%--小图标第三列--%>
        <div class="col-sm-1">
            <br>

            <a href="#"><img src="/mvc/imgs/09.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/091.png'"
                             onMouseOut="this.src='/mvc/imgs/09.png'" /></a>
            <li><a href="#">礼品</a></li>


            <a href="#"><img src="/mvc/imgs/10.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/101.png'"
                             onMouseOut="this.src='/mvc/imgs/10.png'" /></a>
            <li><a href="#">影票</a></li>

            <a href="#"><img src="/mvc/imgs/11.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/111.png'"
                             onMouseOut="this.src='/mvc/imgs/11.png'" /></a>
            <li><a href="#">油卡</a></li>
            <a href="#"><img src="/mvc/imgs/12.png" border="0"
                             onMouseOver="this.src='/mvc/imgs/121.png'"
                             onMouseOut="this.src='/mvc/imgs/12.png'" /></a>
            <li><a href="#">游戏</a></li>
        </div>

    </div>
    <%--产品表--%>
    <div>
<table class="table table-bordered">
    <caption>产品</caption>
    <thead>
    <tr>
        <th>产品图片</th>
        <th>产品名称</th>
        <th>产品价格</th>
        <th>产品信息</th>
    </tr>
    </thead>
    <tbody>
    <tr><td><img src="/mvc/imgs/ipad.jpg"  class="img-thumbnail" alt="Cinque Terre" width="50" height="50"></td><td>平板电脑</td><td>3000</td><td>新品</td></tr>
    <tr><td><img src="/mvc/imgs/sj.jpg"  class="img-thumbnail" alt="Cinque Terre" width="50" height="50"><td>手机</td></td><td>3999</td><td>新品</td></tr>
    <tr><td><img src="/mvc/imgs/cppguo.jpg"  class="img-thumbnail" alt="Cinque Terre" width="50" height="50"><td>苹果</td></td><td>10</td><td>新品</td></tr>
    <tr><td><img src="/mvc/imgs/cpsbiao.jpg"  class="img-thumbnail" alt="Cinque Terre" width="50" height="50"><td>鼠标</td></td><td>100</td><td>新品</td></tr>
    <tr><td><img src="/mvc/imgs/cpyifu.jpg"  class="img-thumbnail" alt="Cinque Terre" width="50" height="50"><td>衣服</td></td><td>99</td><td>新品</td></tr>
    <tr><td><img src="/mvc/imgs/cperji.jpg"  class="img-thumbnail" alt="Cinque Terre" width="50" height="50"><td>耳机</td></td><td>300</td><td>新品</td></tr>
    </tbody>
</table>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
    <ul class="pagination">
        <li><a href="/mvc/product/index">更多</a></li>

    </ul>
    <h5> 网站导航 | 宾馆索引 | 机票索引 | 旅游索引 | 商旅索引 | 攻略索引 | 关于京东 | 企业公民 | 诚聘英才 | 智慧旅游  | 分销联盟 | 代理合作 | 企业商旅 | 中小企业差旅 | 广告业务 | 联系我们

        加盟合作 | 酒店加盟 | 目的地及景区合作 | 用户协议 | 隐私政策 | 营业执照 | 旅游度假资质 | 保险代理 | 友情链接

        Copyright1999-2021, ctrip.com. All rights reserved. | ICP证：沪B2-20050130 | 沪ICP备08023580号

        沪公网备31010502002731号丨互联网药品信息服务资格证</h5>
</div>
<script src="/mvc/plugins/jquery/jquery.min.js"></script>
<script src="/mvc/plugins/bootstrap/js/bootstrap.js"></script>

</body>
</html>